import Vue from 'vue'
import Vuex from 'vuex'
// vuex是vue的一个状态管理工具
import moduleA from './moduleA'
import moduleB from './moduleB'
import persist from 'vuex-persistedstate'
Vue.use(Vuex)

export default new Vuex.Store({
  state: { // state是存放数据的方法  state中的数据也能和vue页面进行数据双向绑定
    user: {
      name: '张三',
      age: '',
      id: '',
      tel: ''
    },
    time: "2020-12-12 12:12:12",
    products: [
      {
        name: '黑龙瞎'
      }
    ]
  },
  getters: {
    // getName(state) {
    //   return state.user.name
    // }
    changeTime(state) {
      let date = new Date(state.time)
      let year = date.getFullYear()
      let month = date.getMonth() + 1
      let day = date.getDate()
      let h = date.getHours()
      let m = date.getMinutes()

      return `${year}-${month}-${day}`
    }
  }, // 相当于vue的computed方法 （计算方法）
  mutations: { // 唯一一个能够修改state数据的方法
    // mutation只能接受一个参数 
    formate(state, val) {
      // console.log(val, val2, val3);
      state.time = val
    },

    changeUser(state, val) {
      state.user = val
    }
  },
  actions: { // 进行异步操作的方法 通过提交mutation来修改state中的数据
    // js中的异步操作 setInterval setTimeout ajax 鼠标事件 键盘事件 等等
    getData() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve('这是异步的数据')
        }, 1000);
      }) 
    },

    changeState(context) {
      console.log(context);
      setTimeout(() => {
        context.commit('changeUser',{
          name: '李四',
          age: 18,
          tel: 110,
          id: 123
        })
      }, 1000);
    }
  },
  modules: { // 模块化的方法 为了方法单个文件存储数据过于臃肿的问题
    moduleA,
    moduleB
  },
  // https://www.jb51.net/article/159788.htm 参考使用地址
  plugins: [
    persist({
      // storage: window.localStorage,
      reducer(val) {
        // console.log(val)
        return {
          user: val.user
        }
        
      }
    })
  ]
})
